<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页聊天程序</title>
    <link rel="stylesheet" href="css/client.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
<!-- 作为一个遮罩层, 实现背景模糊的效果 -->
<div class="cover"></div>
<!-- 作为整个界面的容器 -->
<div class="client-container">
    <!-- 作为聊天区域 -->
    <div class="main">
        <!-- 左侧区域, 显示好友列表和会话列表 -->
        <div class="left">
            <!-- 用户名 -->
            <div class="user">user</div>
            <!-- 搜索框 -->
            <div class="search">
                <!-- 输入框 -->
                <input type="text" placeholder="添加朋友" id="inputBox">
                <!-- 点击按钮 -->
                <button></button>
            </div>
            <!-- 标签页 -->
            <div class="tab">
                <!-- 会话 -->
                <div class="tab-session"></div>
                <!-- 好友 -->
                <div class="tab-friend"></div>
                <!-- 添加好友 -->
                <div class="tab-add-friend"></div>
                <div class="tab-friend-req"></div>
            </div>
            <!-- 会话列表 -->
            <ul class="list" id="session-list">
                <!--                <li>-->
                <!--                    <h3>lisi</h3>-->
                <!--                    <p>吃啥?</p>-->
                <!--                </li>-->

                <!--                <li class="selected">-->
                <!--                    <h3>lisi</h3>-->
                <!--                    <p>吃啥?</p>-->
                <!--                </li>-->

<!--                <li>-->
<!--                    <h3>lisi</h3>-->
<!--                    <p>吃啥吃啥吃啥吃啥吃啥...</p>-->
<!--                </li>-->

<!--                <li>-->
<!--                    <h3>lisi</h3>-->
<!--                    <p>吃啥?</p>-->
<!--                </li>-->
            </ul>

            <!-- 好友列表 -->
            <ul class="list hide" id="friend-list">
                <!--                <li>-->
                <!--                    <h4>lisi</h4>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <h4>lisi</h4>-->
                <!--                </li>-->
                <!--                <li>-->
                <!--                    <h4>lisi</h4>-->
                <!--                </li>-->
<!--                <li>-->
<!--                    <h4>lisi</h4>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h4>lisi</h4>-->
<!--                </li>-->
            </ul>

            <ul class="list hide" id="add-friend">
<!--                <li>-->
<!--                    <h4>zhangsan</h4>-->
<!--                    <button class="custom-button" data-person="zhangsan">添加好友</button>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h4>lisi</h4>-->
<!--                    <button class="custom-button" data-person="lisi">添加好友</button>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h4>wangwu</h4>-->
<!--                    <h3 style="color: #e74c3c">等待对方接受</h3>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h4>未来</h4>-->
<!--                    <h3 style="color: #3de723">已添加好友</h3>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h4>未来</h4>-->
<!--                    <button class="custom-button toBeConfirmed" data-person="未来">请求添加好友</button>-->
<!--                </li>-->
            </ul>

            <ul class="list hide" id="friend-req">
<!--                <li>-->
<!--                    <div class="friend-req-item">-->
<!--                        <h4 class="name">未来 -> 请求添加好友</h4>-->
<!--                        <p class="message">验证消息: 我是笨蛋</p>-->
<!--                        <div class="buttons">-->
<!--                            <button class="accept-btn" data-req-id="1">接受</button>-->
<!--                            <button class="reject-btn" data-req-id="1">拒绝</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <div class="friend-req-item">-->
<!--                        <h4 class="name">未来 -> 请求添加好友</h4>-->
<!--                        <p class="message">验证消息: 我是笨蛋</p>-->
<!--                        <div class="buttons">-->
<!--                            <button class="accept-btn" data-req-id="1">接受</button>-->
<!--                            <button class="reject-btn" data-req-id="1">拒绝</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </li>-->
            </ul>


            <!-- 模态框 -->
            <div class="modal" id="myModal">
                <div class="modal-content">
                    <p id="personName"></p>
                    <h3>添加好友的理由</h3>
                    <textarea id="reasonInput" rows="4" placeholder="在这里输入添加好友的理由"></textarea>
                    <div class="modal-buttons">
                        <button class="custom-button" id="addFriendBtn">添加</button>
                        <button class="custom-button" id="cancelBtn">关闭</button>
                    </div>
                </div>
            </div>

        </div>


        <!-- 右侧区域, 显示聊天编辑框 -->
        <div class="right">
            <!-- 会话标题 -->
            <div class="title"></div>
            <!-- 消息区 -->
            <div class="message-show">
<!--                &lt;!&ndash; 一个消息行 &ndash;&gt;-->
<!--                <div class="message message-left">-->
<!--                    &lt;!&ndash; 一个消息块 &ndash;&gt;-->
<!--                    <div class="box">-->
<!--                        <h4>lisi</h4>-->
<!--                        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash; 一个消息行 &ndash;&gt;-->
<!--                <div class="message message-right">-->
<!--                    <div class="box">-->
<!--                        <h4>zhangsan</h4>-->
<!--                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque consequatur dolor dolores et eveniet ex explicabo maxime, necessitatibus nihil nisi perspiciatis quisquam, ratione suscipit totam vero. Consequuntur eius ipsum sit?</p>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <!-- 消息编辑框 -->
            <textarea class="message-input"></textarea>
            <!-- 发送按钮 -->
            <div class="ctrl">
                <button>发送</button>
            </div>
        </div>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/client.js"></script>
</body>
</html>